<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>查找</title>
  <meta name="viewport"
        content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vant@2.4/lib/index.css">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vant@2.4/lib/index.css">

  <!--    <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>-->
  <link rel="stylesheet" href="/css/global.css">
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/vant@2.4/lib/vant.min.js"></script>
  <!--    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>-->
  <script src="https://cdn.bootcss.com/qs/6.5.2/qs.min.js"></script>
  <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.19.2/axios.js"></script>
</head>
<body>
<div class="bg"></div>
<div id="app">
  <van-row>
    <van-col span="24">
      <van-nav-bar
        title="查找"
        left-text="返回"
        left-arrow
        right-text="编辑"
        @click-left="onClickLeft"
        @click-right="showDeleteButton"
      />
    </van-col>
    <van-col span="24">
      <div class="d-flex">
        <div class="w-100">
          <van-search v-model="selectName" placeholder="请输入搜索关键词" @search="OnSearch"/>
        </div>
        <div class="flex-grow-shrink mr-4">
          <van-dropdown-menu>
            <van-dropdown-item v-model="selectStatus" :options="selectedOptions"/>
          </van-dropdown-menu>
        </div>
      </div>
    </van-col>
    <van-col span="24">
      <div class="box m-4 pl-3 pr-3 pb-3">
        <ul class="breakfast-list">
          <li v-for="(mm,index) in MovementModelAndUnits">
            <div class="flex-grow-shrink">
              <!--                            <van-image-->
              <!--                                    width="100px"-->
              <!--                                    height="100px"-->
              <!--                                    fit="cover"-->
              <!--                                    src="https://img.yzcdn.cn/vant/cat.jpeg"-->
              <!--                            />-->
              <img :src="mm.mmImgurl" width="100px" height="100px"/>
            </div>
            <div class="w-100 pl-3 pr-3">
              <p class="size3 bold">{{mm.mmName}}</p>
              <p class="size1 color-ash">{{mm.difficulty}}</p>
              <p class="size1 color-ash mt-2 text-ellipsis-2">{{mm.mmDescriptoin}}</p>
            </div>
            <van-button class="flex-grow-shrink" plain type="primary" @click="showPopup(index)">选择</van-button>
            <van-icon name="../image/delete.png" size="40" @click="deleteMov(index)"
                      v-show="deletebuttonshow"></van-icon>
          </li>
          <!--                    <li>-->
          <!--                        <div class="flex-grow-shrink">-->
          <!--                            <van-image-->
          <!--                                    width="100px"-->
          <!--                                    height="100px"-->
          <!--                                    fit="cover"-->
          <!--                                    src="https://img.yzcdn.cn/vant/cat.jpeg"-->
          <!--                            />-->
          <!--                        </div>-->
          <!--                        <div class="w-100 pl-3 pr-3" style="overflow: hidden">-->
          <!--                            <p class="size3 bold">一组跑步训练</p>-->
          <!--                            <p class="size1 color-ash">难度：H3</p>-->
          <!--                            <p class="size1 color-lesser">1.长跑：300km</p>-->
          <!--                            <p class="size1 color-lesser">2.短跑：300km</p>-->
          <!--                            <p class="size1 color-ash mt-1 text-ellipsis">Nunc a sagittis elit, eget vehicula ligula. Etiam consequat tristique metus,</p>-->
          <!--                        </div>-->
          <!--                        <van-button class="flex-grow-shrink" plain type="primary" @click="showPopup2">选择</van-button>-->
          <!--                    </li>-->
        </ul>
      </div>
    </van-col>
  </van-row>
  <van-row>
    <van-col span="24">
      <div style="height: 80px;"></div>
      <div class="fixed-bottom p-2 bg-white d-flex" style="box-sizing: border-box">
        <div class="w-100 pr-2">
          <van-button square color="linear-gradient(to right, #ffa64b, #f65649)" block @click="toCustomizeMov">添加自定义运动
          </van-button>
        </div>
        <div class="w-100 pl-2">
          <van-button square color="linear-gradient(to right, #4bb0ff, #6149f6)" block>添加自定义套餐</van-button>
        </div>
      </div>
    </van-col>
  </van-row>
  <van-row>
    <van-col span="24">
      <van-popup
        v-model="show"
        closeable
        position="bottom"
        :style="{ height: '60%' }"
      >
        <ul class="breakfast-list" style="margin: 50px 20px 20px 20px">
          <li>
            <div class="flex-grow-shrink">
              <van-image
                width="100"
                height="100"
                fit="cover"
                src="https://img.yzcdn.cn/vant/cat.jpeg"
              />
            </div>
            <div class="w-100 pl-3 pr-3" style=" overflow: hidden">
              <p class="size3 bold" v-model="pop.name">{{pop.name}}</p>
              <p class="size1 mt-2 text-ellipsis" v-model="pop.descripton">{{pop.descripton}}</p>
              <p class="size1 mt-2 d-flex align-items-center">
                <van-icon name="star-o"></van-icon>
                <span class="ml-2">收藏</span>
              </p>
            </div>
          </li>
        </ul>
        <div class="m-5">
          <p class="color-main size3 mb-2">动作要点：</p>
          <p class="border size2 p-3" v-model="pop.point">{{pop.point}}</p>
        </div>
        <!--                <div class="m-5">-->
        <!--                    <p class="color-main size3 mb-2">教学视频：</p>-->
        <!--                    <van-image-->
        <!--                            width="100%"-->
        <!--                            fit="cover"-->
        <!--                            src="https://img.yzcdn.cn/vant/cat.jpeg"-->
        <!--                    ></van-image>-->
        <!--                </div>-->
        <div class="m-5 size2">
          <!--                    <span class="ml-5">餐别:</span>-->
          <!--                    <van-dropdown-menu>-->
          <!--                        <van-dropdown-item v-model="pop.mealselected" :options="pop.eatType" />-->
          <!--                    </van-dropdown-menu>-->
          <span>单位：</span>
          <van-dropdown-menu>
            <van-dropdown-item v-model="pop.selectindex" :options="pop.unittxt"/>
          </van-dropdown-menu>
          <span>数量：</span>
          <van-field v-model="pop.quanlity"></van-field>
          <van-button class="flex-grow-shrink" plain type="primary" @click="doexersise">运动</van-button>
        </div>
      </van-popup>
    </van-col>
    <van-col span="24">
      <van-popup
        v-model="show2"
        closeable
        position="bottom"
        :style="{ height: '60%' }"
      >
        <div style="height: 30px"></div>
        <div class="m-5">
          <van-image
            width="100%"
            fit="cover"
            src="https://img.yzcdn.cn/vant/cat.jpeg"
          ></van-image>
          <p class="size4 mb-2 bold mt-2" v-model="MovementModelAndUnits.mmName">套餐名称</p>
          <p class="size1 color-ash" v-model="MovementModelAndUnits.mmDescription">描述Proin luctus semper lobortis. Nunc
            efficitur ipsum a nisl euismod porttitor. Phasellus ac imperdiet odio. Proin commodo mattis justo</p>
        </div>
        <div class="m-5">
          <p class="color-main size3 mb-2">动作顺序：</p>
          <div class="d-flex bg-f9 p-2 size2 mb-2">
            <span class="flex-grow-shrink mr-4">1</span>
            <span class="w-100 mr-2">代理收费</span>
            <span class="flex-grow-shrink mr-4">跑100km</span>
            <span class="flex-grow-shrink">消耗100千卡</span>
          </div>
          <div class="d-flex bg-f9 p-2 size2 mb-2">
            <span class="flex-grow-shrink mr-4">1</span>
            <span class="w-100 mr-2">代理收费</span>
            <span class="flex-grow-shrink mr-4">跑100km</span>
            <span class="flex-grow-shrink">消耗100千卡</span>
          </div>
          <div class="d-flex bg-f9 p-2 size2 mb-2">
            <span class="flex-grow-shrink mr-4">1</span>
            <span class="w-100 mr-2">代理收费</span>
            <span class="flex-grow-shrink mr-4">跑100km</span>
            <span class="flex-grow-shrink">消耗100千卡</span>
          </div>
        </div>
      </van-popup>
    </van-col>
  </van-row>

</div>
</body>
<script>
  var vm = new Vue({
    el: '#app',
    data() {
      return {
        deletebuttonshow: false,
        MovementModelAndUnits: [{
          eUnitList:
            [
              {
                id: '',
                unitName: '',
                consumCalories: '',
              },
              {
                id: '',
                unitName: 'sdgsd',
                consumCalories: '231',
              },
              {
                id: '',
                unitName: '',
                consumCalories: '',
              },
            ],
          id: '',
          mmName: '',
          mmImgurl: '',
          mmCategoryId: '',
          status: '',
          mmPackagetype: '',
          mmDescription: '',
          difficulty: '',
          points: '',
          userid: '',
        }],
        selectName: '',
        selectStatus: 0,
        selectedOptions: [
          {text: '默认运动', value: 0},
          {text: '未上传的自定义运动', value: 1},
          {text: '已上传的自定义运动', value: 2},
          {text: '默认套餐', value: 3},
          {text: '未上传的自定义套餐', value: 4},
          {text: '已上传的自定义套餐', value: 5},
        ],
        pop:
          {
            modelid: '',
            name: '',
            descripton: '',
            isCollected: false,
            point: '',
            units: [{
              id: '',
              unitName: 'dsg',
              consumCalories: '231',
            }],
            unittxt: [{
              text: '',
              value: '',
            }],
            eatType: [
              {text: '早餐', value: 1},
              {text: '午餐', value: 2},
              {text: '晚餐', value: 3},
              {text: '加餐', value: 4}
            ],
            quanlity: '',
            unitselected: '',
            mealselected: '',
            selectindex: '',
          },
        selectindexid: '',
        value: '',
        value1: 0,
        show: false,
        show2: false,

      };
    },
    beforeMount: function () {
      console.log('生命周期函数启动！' + this.ModelUnitAndIfo);
      // console.log("开始搜索"+this.selectStatus+this.selectName);
      // let postdata ={
      //     status:this.selectStatus,
      //     name : this.selectName,
      // };
      // axios.post(`/movuser/selectMMByNameUseridAndStatus`, Qs.stringify(postdata))
      //     .then(res=>{
      //         this.MovementModelAndUnits=res.data.list;
      //         console.log('res=>',res.data.list);
      //         if (res.data.returnMsg!=null)
      //             alert(res.data.returnMsg.toString());
      //         Toast(val);
      //     });
    },
    methods: {
      showDeleteButton() {
        console.log("show!!!!!");
        if (vm.$data.deletebuttonshow == false)
          vm.$data.deletebuttonshow = true;
        else
          vm.$data.deletebuttonshow = false;
      },
      onClickLeft() {
        window.location.href = "toIndex";
        Toast('返回');
      },
      showPopup(index) {
        console.log("index is" + index);
        console.log("the id si " + vm.$data.MovementModelAndUnits[index].id);
        vm.$data.selectindexid = index;
        vm.$data.pop.modelid = vm.$data.MovementModelAndUnits[index].id;
        vm.$data.pop.name = vm.$data.MovementModelAndUnits[index].mmName;
        vm.$data.pop.descripton = vm.$data.MovementModelAndUnits[index].mmDescription;
        vm.$data.pop.point = vm.$data.MovementModelAndUnits[index].points;
        vm.$data.pop.status = vm.$data.MovementModelAndUnits[index].status;
        vm.$data.pop.difficulty = vm.$data.MovementModelAndUnits[index].difficulty;
        vm.$data.pop.videourl = vm.$data.MovementModelAndUnits[index].videourl;
        vm.$data.pop.mmPackagetype = vm.$data.MovementModelAndUnits[index].mmPackagetype;
        vm.$data.pop.units = vm.$data.MovementModelAndUnits[index].eUnitList;
        for (var k = 0; k < vm.$data.pop.unittxt.length; k++) {
          vm.$data.pop.unittxt.pop();
        }
        for (var i = 0; i < vm.$data.MovementModelAndUnits[index].eunitList.length; i++) {
          console.log("i=" + i);
          console.log("unitname=" + vm.$data.MovementModelAndUnits[index].eunitList[i].unitName);
          console.log("funitid=" + vm.$data.MovementModelAndUnits[index].eunitList[i].id);
          vm.$data.pop.unittxt.push({
            text: vm.$data.MovementModelAndUnits[index].eunitList[i].unitName,
            value: i,
          });
        }
        this.show = true;
      },
      deleteMov(index) {
        let postmsg = {
          monId: vm.$data.MovementModelAndUnits[index].id,
        };
        axios.post('/movuser/deleteMovModel', Qs.stringify(postmsg)).then(
          res = > {
          var returnMsg = res.data.msg;
        if (returnMsg != null) {
          console.log("？？？？？？" + JSON.stringify(res.data));
          alert(returnMsg);
          if (res.data.sign == 1) {
            vm.$data.MovementModelAndUnits.splice(index, 1)
          }
        }
      }
      )
      },
      doexersise() {
        var index = vm.$data.selectindexid;
        console.log("the index is" + index);
        var uindex = vm.$data.pop.selectindex;
        let mMandEUnit = {
          mid: vm.$data.pop.modelid,
          mmName: vm.$data.pop.name,
          mmImgurl: vm.$data.pop.name,
          mmCategoryId: 1,//vm.$data.MovementModelAndUnits[index].mmCategoryId,
          status: vm.$data.MovementModelAndUnits[index].status,
          mmPackagetype: 1,//vm.$data.MovementModelAndUnits[index].mmPackagetype,
          mmDescroption: vm.$data.pop.descripton,
          userid: vm.$data.MovementModelAndUnits[index].userid,
          difficulty: vm.$data.MovementModelAndUnits[index].difficulty,
          videourl: 1,//vm.$data.MovementModelAndUnits[index].videourl,
          points: vm.$data.MovementModelAndUnits[index].points,
          uid: vm.$data.MovementModelAndUnits[index].eunitList[uindex].id,
          unitName: vm.$data.MovementModelAndUnits[index].eunitList[uindex].unitName,
          consumCalories: vm.$data.MovementModelAndUnits[index].eunitList[uindex].consumCalories,
          quality: vm.$data.pop.quanlity

        };
        var quality = vm.$data.pop.quanlity;
        console.log("$$$$$$$$$$$$quanlity is" + quality);
        axios.post(`/movuser/excuteAMdoel`, mMandEUnit)
          .then(res = > {
          // vm.$data.MovementModelAndUnits=res.data.list;
          console.log('res=>', res.data.returnMsg);
        if (res.data.returnMsg != null)
          alert(res.data.returnMsg.toString());
        Toast(val);
      })
        ;
      },
      OnSearch() {
        console.log("开始搜索" + vm.$data.selectStatus + this.selectName);
        let postdata = {
          status: vm.$data.selectStatus,
          name: vm.$data.selectName,
        };
        axios.post(`/movuser/selectMMByNameUseridAndStatus`, Qs.stringify(postdata))
          .then(res = > {
          vm.$data.MovementModelAndUnits = res.data.list;
        //拼接图片地址
        for (var i = 0; i < vm.$data.MovementModelAndUnits.length; i++) {
          vm.$data.MovementModelAndUnits[i].mmImgurl = "../image/userImg/" + vm.$data.MovementModelAndUnits[i].mmImgurl;
        }
        console.log('res=>', res.data.list);
        if (res.data.returnMsg != null)
          alert(res.data.returnMsg.toString());
        Toast(val);
      })
        ;
      },
      toCustomizeMov() {
        window.location.href = "toAddDIYMov";
      },
      showPopup2() {
        this.show2 = true;
      },
    }
  });
</script>
</html>
